<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@page import="method.TimePeriod"%>
<%@page import="util.Global"%>
<%@ page import="java.util.Arrays" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link type="text/css" href="layout.css" rel="stylesheet">
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>

	<link type="text/css" href="css/jquery-ui-1.8.9.custom.css" rel="stylesheet" />   
	<script type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="./js/jquery-ui-1.8.8.custom.min.js"></script>
	<script src="./development-bundle/ui/jquery.ui.core.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.widget.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.button.js"></script> 
	<script src="./development-bundle/external/jquery.bgiframe-2.1.2.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.core.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.widget.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.mouse.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.draggable.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.position.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.resizable.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.dialog.js"></script> 
	<script src="./development-bundle/ui/jquery.ui.datepicker.js"></script> 

	
	<script type="text/javascript" src="./lib/loadImage.js"></script>
<script type="text/javascript" src="./lib/animation.js"></script>
<script type="text/javascript" src="./lib/z-level.js"></script>
<script type="text/javascript" src="./lib/global.js"></script>
<script type="text/javascript">
  var map;
  var overlaysArray=[];
  var root="<%=Global.figures_location %>"; 
  
  var depth="0";
  var variable="dino";
  var date;
 
  $(document).ready(function () {
  		initialize();
  		$('#'+availableDates[availableDates.length-1]+'_0000').click();
});
  
  function initialize() { 
  
       
    $(function() {
		$( "#variables" ).buttonset();
		$( "#depth" ).buttonset();
		
		//if it's not IE
		if ($.browser.msie==null)
			$( "#time-list" ).buttonset();
			
		else{
			var version=$.browser.version;
			if (version!="8.0" && version!="9.0")
				alert("Detected your web browser is: IE "+version+".\nKnown compatibility issue is existed with this browser, please use another browser to gain better experience.")
		}
	});

	$('#variables > input').bind("click",
			function(){
				variable=this.id;
				plot();
						});
	$('#time-list > div > input').bind("click",
			function(){
				date=this.id;
				plot();
						});
 	$('#depth > input').bind("click",
			function(){
				depth=this.id;
				plot();
				});      					
	$(function() {
		$( "#datepicker" ).datepicker({
	             changeMonth: true,
				 changeYear: true,	
				 onSelect: function(dateText,inst){
			 		loadMoreDates(dateText);
			 	}
		});
	});
				
	map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);  
          
    map.setMapTypeId(google.maps.MapTypeId.SATELLITE);   
    
    //InitLatlng(map);
    
    //To display the default figure (current day, 0 meter, uv) on the map
    /*
    var d=new Date();
    var month=d.getMonth()+1;
    var day_0=d.getDate();
    if (month<10)
    	month="0"+month.toString();
    else
    	month=month.toString();
    if (day_0 <10)
    	day_0="0"+day_0.toString();
    else
    	day_0=day_0.toString();
    var s=(d.getYear()+1900).toString()+month+day_0+"_0000";
    $('#'+s).click();
    */
}
	
	</script> 

</head>
<body>

		<div id="logo" >
			<jsp:include page="banner.jsp"></jsp:include>
		</div>
		<div id="box">
<div id="links" >
  <jsp:include page="left_column.jsp"></jsp:include>
</div>


      <div id="map_canvas"  > </div>

		<form>
		<div id="depth">
            <span class="text">Depth:</span>
          <br/><input type="radio" id="0" name="radio" checked="checked"/><label for="0">0m</label> 
			<br/><input type="radio" id="5" name="radio"  /><label for="5">5m</label> 
			<br/><input type="radio" id="10" name="radio" /><label for="10">10m</label> 
			<br/><input type="radio" id="20" name="radio"  /><label for="20">20m</label> 
			<br/><input type="radio" id="30" name="radio" /><label for="30">30m</label> 
			<br/><input type="radio" id="40" name="radio"  /><label for="40">40m</label> 
			<br/><input type="radio" id="50" name="radio"  /><label for="50">50m</label> 
			<br/><input type="radio" id="75" name="radio"  /><label for="75">75m</label> 
			<br/><input type="radio" id="100" name="radio"  /><label for="100">100m</label> 
			<br/><input type="radio" id="125" name="radio"  /><label for="125">125m</label> 
			<br/><input type="radio" id="150" name="radio"  /><label for="150">150m</label> 
			<br/><input type="radio" id="200" name="radio"  /><label for="200">200m</label> 
			<br/><input type="radio" id="250" name="radio"  /><label for="250">250m</label> 
			
		  </div>
		  </form>

      	<div  id="para">

	
		  <form>
            <div id="variables">
            	<span class="text">Variables:</span>
            	<br/><input type="radio" id="t" name="radio"  /><label for="t"><big>temperature</big></label> 
				<br/><input type="radio" id="s" name="radio"   /><label for="s"><big>salinity</big></label> 
				<br/><input type="radio" id="uv" name="radio"  /><label for="uv"><big>current</big></label> 
           		<br/><input type="radio" id="dino" name="radio"  checked="checked" /><label for="dino"><big>Alexandrium fundyense</big></label>
           </div>
          </form>
           
           <form>
          <span class="text">Date:</span>
		  <div id="time-list" style="position: relative; overflow: auto; height: 450px;">
		  	<div style="width: 150px;" >
			 <%
				TimePeriod tp=new TimePeriod();
				ArrayList<String> tmp=tp.getTimePeriod();
				
				//Only last 30 days is needed
				
				List<String> dates;
				
				if (tmp.size()>30)
					dates=tmp.subList(tmp.size()-30,tmp.size());
				else 
					dates=tmp;
			
				%>
				<script type="text/javascript">
					date=<%=dates.get(dates.size()-1) %>+"_0000";
					
				</script>
				<% 
				
				for (int i=0;i<dates.size();i++)
				{
				
					%>
					<script>
						availableDates.push(<%=dates.get(i)%>);
					</script>
					<%
				
					for (int j=0;j<=12;j+=12)
					{
						String str_date=dates.get(i)+"_";
						if (j<10)
							str_date+="0";
						str_date+=String.valueOf(j)+"00";		
						String str_date_format=dates.get(i).subSequence(4,6)+"/"+dates.get(i).substring(6,8)+"/"+dates.get(i).substring(0,4)
										+" "+str_date.substring(9,11)+":"+str_date.substring(11);
					
					%>
					 <!--[if IE]>
						<br/><input type="radio" id="<%=str_date%>" name="radio" class="ui-helper-hidden-accessible"/>
						 <label for="<%=str_date%>" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false">
						 		<span class="ui-button-text"><%=str_date_format%></span>
						 </label>
		  			<![endif]-->
		  			
		  			<![if !IE]>
						<br/><input type="radio" id="<%=str_date%>" name="radio" /><label for="<%=str_date%>"><%=str_date_format%></label>
		  		    <![endif]>  			


					<%
					
					}		
				}				
			 %>  
			 </div>
		  </div>
		  </form>
		  <div id="archive_0">
		  	 <a  href="#" onClick="showDatepicker();">Animation starting date</a>	
		  </div>
		  <dir id="archive_1" style="visibility: hidden;">
		  Please select the date below: <input type="text" id="datepicker"> 
		  </dir>
                  	      <div style="position: absolute; left: -875px; top: 619px;">

  <form>
			<input type="button" id="start" OnClick="foo();" value="Start animation"/>
			<input type="button" OnClick="stopCount();" disabled="disabled" value="Stop"/>
			</form>
            </div>
</div>
      	<div id="description">
     		<p>
     			<center>
     			Ruoying He<sup>1</sup>, Yizhen Li<sup>1</sup>, Dennis McGillicuddy<sup>2</sup>, Don Anderson<sup>2</sup>, Bruce Keafer<sup>2</sup>
     			</center>
     		</p> 
			<p style="text-align: center;"><sup>1</sup>North Carolina State University</p>
			<p style="text-align: center;"><sup>2</sup>Woods Hole Oceanographic Institution</p>
      	
		  <p>Instruction:</p>
          <li>Depth: Clicking on one of these will update the layer and display the selected depth</li>
          <li>Variables: Selecting different one can control the model variable shown</li>
          <li>Date: Selecting one of these will update the model so that the time selected is display</li>
          <li>Animation: Click on &quot;Start animation&quot; button will display the 72 hours forecast from today, given the selected depth and variable; Click on &quot;Stop&quot; to terminate the animation</li>
          <li>Archive: Click and select the date of archive you want to inspect</li>
		  <p><font color="#ff0000">DISCLAIMER:
		    This nowcast/forecast system is a research product and under
		    construction.
		    No warranty is made, expressed or implied at this stage, regarding
		    the accuracy or validity of model results, or regarding the
		    suitability of the model output for any particular application. </font></p>
		<p>
		Questions or comments? Please contact here <a href="mailto:rhe AT ncsu.edu">1</a>,<a href="mailto:yli15 AT ncsu.edu">2</a>,<a href="mailto:fchen7 AT ncsu.edu">3</a>
		</p>
        </div>
</div>

<script type="text/javascript">
			$('#'+date).click();

</script>

			
</body>
</html>
